<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>退库报表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<jsp:include page="${pageContext.request.contextPath }/resource_path.jsp" flush="true"/>
	<script src="${pageContext.request.contextPath }/js/monReport-data..monReport-data.js"></script>

</head>
<body class="layui-anim layui-anim-up">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a>
          <cite>退库报表</cite>
        </a>
      </span>
</div>
<div class="x-body">

	<div class="layui-row">
		<div class="layui-form">
			<div class="layui-input-inline">
				<div class="layui-input-inline" style="width: 155px">
					<select  name="keyword" id="customer_id" lay-filter="keyword">
						<option value="">--请选择供应商--</option>
						<c:forEach items="${allCustomerList }" var="customer">
							<option value="${customer.id}">${customer.customer_name }</option>
						</c:forEach>
					</select>
				</div>

				<div class="layui-input-inline" style="width: 150px">
					<input class="layui-input" id="keyword2" placeholder="请输入SAP/QAD" style="width: 150px">
				</div>

				<%--<div class="layui-input-inline" style="width: 150px">
					<select style="width: 285px" id="selectTime"   lay-filter="selectTime">
						<option value="1">请选择周期</option>
						<option value="2">周</option>
						<option value="3">月</option>
					</select>
				</div>--%>

				<%--<div class="layui-input-inline" style="width: 150px">
					<select style="width: 285px" id="selectType"   lay-filter="selectType">
						<option value="2">请选择出库方式</option>
						<option value="1">一般出库</option>
						<option value="0">精简出库</option>
					</select>
				</div>--%>

				<div class="layui-input-inline" style="width: 150px">
					<input type="text" class="layui-input" id="test1" style="display: inline; width: 150px; margin-left: 10px">
					<%--<input class="layui-input" name="date" id="date" placeholder="请输入日期" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px">--%>
				</div>
				<div class="layui-input-inline" style="width: 150px">
					<input type="text" class="layui-input" id="test2" style="display: inline; width: 150px; margin-left: 10px">
				</div>
				<div class="layui-input-inline" style="width: 30px"	>
					<input type="hidden" id="dateTime">
					<input type="hidden" id="dateTime2">
				</div>
				<div class="layui-input-inline">
					<button class="layui-btn" data-type="zreload">周</button>
				</div>
				<div class="layui-input-inline">
					<button class="layui-btn" data-type="yuereload">月</button>
				</div>
				<div class="layui-input-inline" style="width: 50px">

				</div>
				<button class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>
				<button class="layui-btn layui-btn-danger" id="export"><i class="layui-icon layui-icon-upload"></i>导出</button> 
			</div>
		</div>
	</div>
	<table class="layui-hide" id="tableList" lay-filter="tableList"></table>
</div>
<script src="${pageContext.request.contextPath }/js/td/layuiRowspan.js" charset="utf-8"></script>
<script>
	$(document).ready(function () {
		var time = new Date();
		var day = ("0" + time.getDate()).slice(-2);
		var month = ("0" + (time.getMonth() + 1)).slice(-2);
		var today = time.getFullYear() + "-" + (month) + "-" + (day);
		$('#dateTime').val(today);
		$('#dateTime2').val(today);
	})
</script>
<script>
	layui.use('laydate', function(){
		var laydate = layui.laydate;

		//执行一个laydate实例
		laydate.render({
			elem: '#test1' ,//指定元素
            value: new Date(),
			type: 'datetime',
			done:function(value, date, endDate) {

				$('#dateTime').val(value);

			}

		});
		laydate.render({
			elem: '#test2' ,//指定元素
            value: new Date(),
			type: 'datetime',
			done:function(value, date, endDate) {
				$('#dateTime2').val(value);
			}
		});
	});

	var table;
	layui.use(['table','layer','upload','form','laydate'], function(){
		table = layui.table;
		var layer = layui.layer;
		var form = layui.form;
		var laydate = layui.laydate;
		//执行一个laydate实例
		laydate.render({
			elem: '#date', //指定元素
			type: 'date',
			value: new Date(),
			format: 'yyyy-MM-DD', //自动生成的时间格式
			btns: ['now', 'confirm']
		});

		var $ = layui.jquery, active = {
			reload:function () {
				var date = $('#dateTime').val();
				var dateTime2 = $('#dateTime2').val();
				//产品名称
				var keyword2 = $.trim($("#keyword2").val());
				var selectTime = $.trim($("#selectTime").val());
				var customer_id = $("#customer_id").val();
				table.reload('tableList',{
					method:'get'
					,where:{
						'maName':keyword2
						,'date':date
						,'customer_id':customer_id
						,'selectTime':selectTime
						,'dateTime2':dateTime2
					}
					,page: {
						curr: 1//重新从第 1 页开始
					}
				});
			},
			yuereload:function () {
				var date = $('#dateTime').val();
				var dateTime2 = $('#dateTime2').val();
				//产品名称
				var keyword2 = $.trim($("#keyword2").val());
				var selectTime = $.trim($("#selectTime").val());
				var customer_id = $("#customer_id").val();
				table.reload('tableList',{
					method:'get'
					,where:{
						'maName':keyword2
						,'date':null
						,'customer_id':customer_id
						,'selectTime':3
						,'dateTime2':null
					}
				});
			},
			zreload:function () {
				var date = $('#dateTime').val();
				var dateTime2 = $('#dateTime2').val();
				//产品名称
				var keyword2 = $.trim($("#keyword2").val());
				var selectTime = $.trim($("#selectTime").val());
				var customer_id = $("#customer_id").val();
				table.reload('tableList',{
					method:'get'
					,where:{
						'maName':keyword2
						,'date':null
						,'customer_id':customer_id
						,'selectTime':2
						,'dateTime2':null
					}
				});
			}
		}
		$('.layui-btn').on('click', function(){
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
		$("#date").val(curentMonth())
		$("#type").val('month')
		$('#type').attr("disabled",true)
		$("#customer_id").val('${customer_id}')
		$('#customer_id').attr("disabled",true)
		var date = $('#dateTime').val();
		var dateTime2 = $('#dateTime2').val();
		//产品名称
		var keyword2 = $.trim($("#keyword2").val());
		var selectTime = $.trim($("#selectTime").val());
		var customer_id = $("#customer_id").val();
		table.render({
			elem: '#tableList'
			,where:{
				'maName':keyword2
				,'date':date
				,'customer_id':customer_id
				,'selectTime':selectTime
				,'dateTime2':dateTime2
			}
			,url:'${pageContext.request.contextPath }/reportForm/getReportFormReTurnList.do'
			,toolbar: '#toolbar'
			,title: 'machineList'
			,page:true
			,limits:[10,20,30]
			//,defaultToolbar:['filter', 'print']
			,request: {   //如果无需自定义请求参数，可不加该参数
				pageName: 'page' //页码的参数名称，默认：page
				,limitName: 'pageSize' //每页数据量的参数名，默认：limit
			}
			,response: {   //如果无需自定义数据响应名称，可不加该参数
				countName: 'total' //规定数据总数的字段名称，默认：count
				,dataName: 'rows' //规定数据列表的字段名称，默认：data
			}
			,cols:	[[
				{type:'numbers',title: '序号', width:80, sort: true, fixed: 'left'}
				,{field: 'keyword03', title: '供应商', width: 150}
				,{field: 'createDate', title: '时间'}
				,{field: '', title: '类型',
					templet:function  () {
						return "退货";
					}
				}
				,{field: 'cancellingNumber', title: '单号'}
				,{field: 'phone', title: 'SAP/QAD'}
				,{field: 'userName', title: '物料名称', width: 277}
				,{field: 'contacts_name', title: '实际数量'}
				

			]]
			,done : function(res, curr, count){
				$('th').css({
					'background-color': '#009688', 'color': '#fff','font-weight':'bold',
					//'font-size': 10,
				})
				merge(res);
			}
		});
		 $("#export").click(function(){
			 var date = $('#dateTime').val();
				var dateTime2 = $('#dateTime2').val();
				//产品名称
				var keyword2 = $.trim($("#keyword2").val());
				var selectTime = $.trim($("#selectTime").val());
				var customer_id = $("#customer_id").val();
			
 			window.location.href="${pageContext.request.contextPath }/reportForm/ExportReportFormReTurnList.do?date="+date+"&maName="+keyword2+"&customer_id="+customer_id+"&selectTime="+selectTime+"&dateTime2="+dateTime2;
        
         })

		//监听单元格事件
		table.on('tool(tableList)', function(obj){
			var data = obj.data;
			for (var i = 1; i <= 4; i++) {
				if(obj.event === ('tankuang'+i)){
					tankuang(data.materiel.id,i)
					break;
				}
			}
		});
		//获取当前日期
		function tankuang(id,type) {
			var divID  = "div"+type
			var title = "库存日报表-入库"
			if(type == 1){
				title = "库存日报表-入库"
			}else if(type == 2){
				title = "库存日报表-出库"
			}else if(type == 3){
				title = "库存日报表-返厂"
			}else if(type == 4){
				title = "库存日报表-退货"
			}
			layer.open({
				type: 1 					//Page层类型
				,area: ['1380px', '600px'] 			//宽  高
				,title: title
				,shade: 0.6 				//遮罩透明度
				,maxmin: true 				//允许全屏最小化
				,anim: 1 					//0-6的动画形式，-1不开启
				,content: $('#'+divID)
				,end: function () {
					var formDiv = document.getElementById(divID);
					formDiv.style.display = '';
				}
				,success: function(){
					form.render();
				}
			});
		}
	});
	//获取当前日期
	function curentMonth() {
		var now=new Date();
		var year = now.getFullYear();       //年
		var month = now.getMonth() + 1;     //月
		var day = now.getDate();            //日
		var time=year+"-"+add0(month);
		return time;
	}
	function add0(m){return m<10?'0'+m:m }
	toastrStyle()



	//合并单元格
	function merge(res) {

		var data = res.data;
		var mergeIndex = 0;//定位需要添加合并属性的行数
		var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
		var columsName = ['createDate'];//需要合并的列名称
		var columsIndex = [1];//需要合并的列索引值

		for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
			var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
			for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
				var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
				var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列

				if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
					mark += 1;
					tdPreArr.each(function () {//相同列的第一列增加rowspan属性
						$(this).attr("rowspan", mark);
					});
					tdCurArr.each(function () {//当前行隐藏
						$(this).css("display", "none");
					});
				}else {
					mergeIndex = i;
					mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
				}
			}
			mergeIndex = 0;
			mark = 1;
		}
	}


</script>
</body>
</html>